<template>
	<div>
		<table-com></table-com>
		<div id="myChart"></div>
	</div>
</template>

<script>
	import tableCom from '@/components/page/customer/com/common.vue'
	export default {
		components: {
			tableCom
		},
		data() {
			return {
				customer_id: '',
				myCharts: '',
				tableData: []
			}
		},
		created(){
			// 传值  
			this.customer_id = this.$route.params.id;
		},
		mounted(){
			this.getData();
			this.myChart();
		},
		methods: {  
			getData(){
//				/customer_monitor/GLU_list  API
				this.$http.get('/customer_monitor/weight_list?customer_id=' + this.customer_id,{page:10000})
				.then(({data})=>{
					console.log(data)
					this.tableData = data.data.list.map((e)=>{
						//  时间戳转日期
						var date = new Date(e.testTime);
						let Y = date.getFullYear() + '-';
						let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
						let D = date.getDate();
						D = D < 10 ? '0' + date.getDate() : D
						e.testTime = Y + M + D
						return e
					})		
					//  将X轴日期遍历出来 加入新的数组
					var xData = [];
					this.tableData.forEach(e=>{
						xData.unshift(e.testTime)
					})
					// 体重
					var weight = [];
					for(var i=0;i<this.tableData.length;i++){
						weight.unshift(this.tableData[i].weight)
					}
					this.myCharts.setOption({
						xAxis: [
							{data: xData}, //将异步请求获取到的数据进行装载
						],
						series:[
	            			{data: weight}
	            		]
					})
					
				})
				.catch((err)=>{
					console.log(err);
					this.$Notice.error({ title: "血糖数据详情获取失败！" });
				})
			},
			myChart(){
				let myChart = this.$echarts.init(document.getElementById('myChart'));  // 全局引用写法
				this.myCharts = myChart;
				//用于使chart自适应高度和宽度  
				window.onresize = function() {
					//重置容器高宽  
					myChart.resize();
				};
				var option = {
				    title : {
				        text: '体重'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    
				    legend: {
				       data: ['体重']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            name: '日期',
				            boundaryGap : false,
//				            data : ['周一','周二','周三','周四','周五','周六','周日']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name: 'kg',
				            axisLabel : {
				                formatter: '{value}'
				            },
				            splitNumber: 0,
							boundaryGap: [0, 0.1], //   不要顶天立地-,
				        }
				    ],
				    series: [{
							name: '体重',
							type: 'line',
							//data: ['10'],
							symbol: 'circle',
							color: '#0099ff',
//							symbolSize: 5
							//  拐点圆形的大小
							lineStyle: {
								color: '#0099ff'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#0099ff'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										return '#0099ff';
									}
								}
							}
						}
					]
				
				};
				myChart.setOption(option);
				                    
			}
		}
	}
</script>

<style scoped>
	#myChart{
		width: 100%;
		height: 700px;
	}
</style>